<template>
  <section
    ref="stackLineRef"
    class="stack-line"
  />
</template>
<script lang="ts">
import {
  defineComponent, nextTick, watch, ref,
} from 'vue';

import { useDebounceFn } from '@vueuse/core';
import { init } from 'echarts';

import type { EChartsOption } from 'echarts';

export default defineComponent({
  name: 'StackLine',
  props: {
    activeTab: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    const createXData = () => {
      const data = [];
      for (let i = 1; i < 31; i++) {
        data.push(`${i}日`);
      }
      return data;
    };

    const shuffle = (arr:number[]) => {
      let l = arr.length;
      let index;
      let temp;
      while (l > 0) {
        index = Math.floor(Math.random() * l);
        temp = arr[l - 1];
        arr[l - 1] = arr[index];
        arr[index] = temp;
        l--;
      }
      return arr;
    };

    const stackLineRef = ref();

    const createChart = () => {
      const stackLineChart = init(stackLineRef.value);
      const xData = createXData();
      const payCountsTemp = [
        509, 917, 2455, 2610, 2719,
        3033, 3044, 3085, 2708, 2809,
        2117, 2000, 1455, 1210, 719,
        733, 944, 2285, 2208, 3372,
        3736, 3693, 2962, 2810, 3519,
        2455, 2610, 2719, 2484, 2078
      ];
      const visitCountsTemp = [
        3136, 3693, 2962, 3810, 3519,
        3484, 3915, 3823, 3455, 4310,
        4019, 3433, 3544, 3885, 4208,
        3372, 3484, 3915, 3748, 3675,
        4009, 4433, 3544, 3285, 4208,
        3372, 3484, 3915, 3823, 4265,
        4298
      ];
      const payCounts = shuffle(payCountsTemp);
      const visitCounts = shuffle(visitCountsTemp);
      const option: EChartsOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          top: 50,
          bottom: 80,
          left: 60,
          right: 60,
        },
        legend: {
          top: 8,
          textStyle: {
            fontSize: 14,
          },
          data: ['客流量', '支付笔数'],
        },

        calculable: true,
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: true,
            },
            data: xData,
          }
        ],

        yAxis: [
          {
            type: 'value',
          }
        ],
        dataZoom: [
          {
            show: true,
            height: 20,
            xAxisIndex: [0],
            bottom: 30,
            start: 10,
            end: 80,
          },
          {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35,
          }
        ],
        series: [
          {
            name: '客流量',
            smooth: true,
            type: 'line',
            symbolSize: 10,
            symbol: 'circle',
            itemStyle: {
              color: '#ffc53d',
            },
            markPoint: {
              label: {
                color: '#fff',
              },
              data: [
                {
                  type: 'max',
                  name: '最大值',
                },
                {
                  type: 'min',
                  name: '最小值',
                }
              ],
            },
            data: visitCounts,
          },
          {
            name: '支付笔数',
            smooth: true,
            type: 'line',
            symbolSize: 10,
            symbol: 'circle',
            itemStyle: {
              color: '#7DD75A',
            },
            markPoint: {
              label: {
                color: '#fff',
              },
              data: [
                {
                  type: 'max',
                  name: '最大值',

                },
                {
                  type: 'min',
                  name: '最小值',
                }
              ],
            },
            data: payCounts,
          }],
      };

      stackLineChart.setOption(option);
      window.addEventListener('resize', useDebounceFn(() => {
        stackLineChart.resize();
      }, 200));
    };
    watch(
      () => props.activeTab,
      () => {
        nextTick(() => {
          createChart();
        });
      },
      {
        immediate: true,
      }
    );
    return {
      stackLineRef,
    };
  },
});
</script>
<style lang="scss" scoped>
.stack-line {
  height: 460px;
}
</style>
